<%--
  Created by IntelliJ IDEA.
  User: LYK
  Date: 2017/4/18
  Time: 10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>bootstrap-validate</title>
	<jsp:include page="/static/commonviews/header.jsp"/>
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col-md-9" role="main">
			<div class="doc-section">
				<h2 class="page-header">Bootstrap Validator</h2>
			</div>

			<div class="doc-section">
				<h3 class="page-header">Demo</h3>
				<form id="defaultForm" method="post" class="form-horizontal" action="#">
					<div class="form-group">
						<label class="col-lg-3 control-label">Full name</label>
						<div class="col-lg-4">
							<input type="text" class="form-control" name="firstName" placeholder="First name" />
						</div>
						<div class="col-lg-4">
							<input type="text" class="form-control" name="lastName" placeholder="Last name" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Username</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" name="username" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Email address</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" name="email" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Password</label>
						<div class="col-lg-5">
							<input type="password" class="form-control" name="password" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Retype password</label>
						<div class="col-lg-5">
							<input type="password" class="form-control" name="confirmPassword" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Gender</label>
						<div class="col-lg-5">
							<div class="radio">
								<label>
									<input type="radio" name="gender" value="male" /> Male
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="gender" value="female" /> Female
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="gender" value="other" /> Other
								</label>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Birthday</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Languages</label>
						<div class="col-lg-5">
							<div class="checkbox">
								<label>
									<input type="checkbox" name="languages[]" value="english" /> English
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="languages[]" value="french" /> French
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="languages[]" value="german" /> German
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="languages[]" value="russian" /> Russian
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="languages[]" value="other" /> Other
								</label>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label">Programming Languages</label>
						<div class="col-lg-5">
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="net" /> .Net
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="java" /> Java
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="c" /> C/C++
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="php" /> PHP
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="perl" /> Perl
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="ruby" /> Ruby
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="python" /> Python
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="programs[]" value="javascript" /> Javascript
								</label>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-3 control-label" id="captchaOperation"></label>
						<div class="col-lg-2">
							<input type="text" class="form-control" name="captcha" />
						</div>
					</div>

					<div class="form-group">
						<div class="col-lg-9 col-lg-offset-3">
							<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
							<button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
							<button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
							<button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<jsp:include page="/static/commonviews/footer.jsp"/>
<script>
	$(function () {
		function randomNumber(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		};
		$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

		$('#defaultForm').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				firstName: {
					group: '.col-lg-4',
					validators: {
						notEmpty: {
							message: 'The first name is required and cannot be empty'
						}
					}
				},
				lastName: {
					group: '.col-lg-4',
					validators: {
						notEmpty: {
							message: 'The last name is required and cannot be empty'
						}
					}
				},
				username: {
					message: 'The username is not valid',
					validators: {
						notEmpty: {
							message: 'The username is required and cannot be empty'
						},
						stringLength: {
							min: 6,
							max: 30,
							message: 'The username must be more than 6 and less than 30 characters long'
						},
						regexp: {
							regexp: /^[a-zA-Z0-9_\.]+$/,
							message: 'The username can only consist of alphabetical, number, dot and underscore'
						},
						remote: {
							type: 'POST',
							url: 'remote.php',
							message: 'The username is not available'
						},
						different: {
							field: 'password,confirmPassword',
							message: 'The username and password cannot be the same as each other'
						}
					}
				},
				email: {
					validators: {
						emailAddress: {
							message: 'The input is not a valid email address'
						}
					}
				},
				password: {
					validators: {
						notEmpty: {
							message: 'The password is required and cannot be empty'
						},
						identical: {
							field: 'confirmPassword',
							message: 'The password and its confirm are not the same'
						},
						different: {
							field: 'username',
							message: 'The password cannot be the same as username'
						}
					}
				},
				confirmPassword: {
					validators: {
						notEmpty: {
							message: 'The confirm password is required and cannot be empty'
						},
						identical: {
							field: 'password',
							message: 'The password and its confirm are not the same'
						},
						different: {
							field: 'username',
							message: 'The password cannot be the same as username'
						}
					}
				},
				birthday: {
					validators: {
						date: {
							format: 'YYYY/MM/DD',
							message: 'The birthday is not valid'
						}
					}
				},
				gender: {
					validators: {
						notEmpty: {
							message: 'The gender is required'
						}
					}
				},
				'languages[]': {
					validators: {
						notEmpty: {
							message: 'Please specify at least one language you can speak'
						}
					}
				},
				'programs[]': {
					validators: {
						choice: {
							min: 2,
							max: 4,
							message: 'Please choose 2 - 4 programming languages you are good at'
						}
					}
				},
				captcha: {
					validators: {
						callback: {
							message: 'Wrong answer',
							callback: function(value, validator) {
								var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
								return value == sum;
							}
						}
					}
				}
			}
		});

		// Validate the form manually
		$('#validateBtn').click(function() {
			$('#defaultForm').bootstrapValidator('validate');
		});

		$('#resetBtn').click(function() {
			$('#defaultForm').data('bootstrapValidator').resetForm(true);
		});
	})
</script>

</body>
</html>
